<template>
  <div class="apps-forms">
    <PerfectScrollbar
      class="app-form-items"
      :settings="{}"
    >
      <span
        class="menu-custom-tree-node menu-icon-node"
        :class="{
          'active': comp?.group_id === p.group_id
        }"
        v-for="p in dcomps"
        @click="handleClick(p)"
      >
        <span class="menu-custom-icon">
          <JIcon :icon="p.icon" />
        </span>
        <span v-text="p.name"></span>
      </span>
    </PerfectScrollbar>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import {DFT_ICONS} from "@jzl/icons";

const props = defineProps({
  appId: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['select']);

const dcomps = ref([
  { group_id: -100, icon: DFT_ICONS.platform, name: '平台通用组件' },
  { group_id: -1, icon: DFT_ICONS.global, name: '系统通用组件' },
  { group_id: 1, icon: DFT_ICONS.app, name: '应用专属组件' }
]);
const comp = ref(null);

const handleClick = (data) => {
  comp.value = data;
  emit('select', data);
};

</script>

<style lang="scss" scoped>
/* 你的样式代码 */
</style>
